<template>
  <div class="easyui-layout" style="height:100%">
    <div data-options="region:'north'" style="height:50px">
      <a id="btn" href="#">{{test}}</a>
    </div>
    <div data-options="region:'south',split:true" style="height:50px;"></div>
    <div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
    <div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
    <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
      <table class="easyui-datagrid"
             data-options="border:false,singleSelect:true,fit:true,fitColumns:true">
        <thead>
        <tr>
          <th data-options="field:'itemid'" width="80">Item ID</th>
          <th data-options="field:'productid'" width="100">Product ID</th>
          <th data-options="field:'listprice',align:'right'" width="80">List Price</th>
          <th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>
          <th data-options="field:'attr1'" width="150">Attribute</th>
          <th data-options="field:'status',align:'center'" width="60">Status</th>
        </tr>
        </thead>
      </table>
    </div>
    <div id="dd">Dialog Content.</div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      test: 'abc1234'
    }
  },
  mounted: function () {
    $('#btn').linkbutton({
      iconCls: 'icon-search'
    })
  },
  methods: {
    open () {
      console.log('abc')
      $('#dd').dialog({
        title: 'My Dialog',
        width: 400,
        height: 200,
        closed: false,
        cache: false,
        modal: true
      })
    }
  }
}
</script>

<style>
  html, body {
    height: 100%;
    overflow: hidden;
    margin: 0;
  }
</style>
